{% extends '_base_create_update.html' %}

{% block top_css %}
    {{ super() }}

    <!--Treeview-->
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='plugins/bootstrap-treeview/css/bootstrap-treeview.min.css') }}">
    <!--bees-->
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/bees.css') }}">
{% endblock %}


<!-- Content head -->
{% block head_title %}
    作业中心
{% endblock %}

{% block head_nav %}
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-home"></i></a></li>
        <li><a href="#">定时任务</a></li>
        <li class="active">定时脚本</li>
    </ol>
{% endblock %}

<!-- Content body -->
{% block body_title %}
    新增脚本文件
{% endblock %}

{% block body_form %}
    <form name="scriptForm" action="" class="form-horizontal">
        <div class="panel-body">
            <p class="bord-btm pad-ver text-main text-bold">基本信息</p>

            <div class="row">
                <div class="col-lg-12">
                    <fieldset class="pad-top">
                        <div class="form-group">
                            <label class="col-lg-2 control-label"><span class="text-danger">* </span>脚本名称</label>
                            <div class="col-lg-8">
                                <input type="text" class="form-control" name="name" placeholder="请输入脚本名称" data-rule="脚本名称: required;" autocomplete="off">
                            </div>
                        </div>
                    </fieldset>
                </div>
                <div class="col-lg-12">
                    <fieldset class="pad-top">
                        <div class="form-group">
                            <label class="col-lg-2 control-label"><span class="text-danger">* </span>脚本语言</label>
                            <div class="col-lg-8">
                                <select class="select2 form-control" name="language" data-placeholder="请选择脚本语言" data-rule="脚本语言: required;">
                                    <option value="python3" selected>python3</option>
                                    <option value="php">php</option>
                                    <option value="sh">shell</option>
                                </select>
                            </div>
                        </div>
                    </fieldset>
                </div>
                <div class="col-lg-12">
                    <fieldset class="pad-top">
                        <div class="form-group">
                            <label class="col-lg-2 control-label">脚本内容</label>

                            <div class="col-lg-8" style="margin-top: 8px">
                                <div class="fs-box">
                                    <div class="label label-default">
                                        <i class="fs-max fa fa-expand"></i>
                                        <i class="fs-min fa fa-compress hidden"></i>
                                    </div>
                                    <div id="editor" class="form-control" style="height: 520px; width: 100%"></div>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                </div>
            </div>
        </div>

        <div class="panel-footer">
            <div class="row">
                <div class="col-sm-6 col-sm-offset-6">
                    <div class="col-sm-7 col-sm-offset-3">
                        <button class="btn btn-mint pull-right" type="submit">提交</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
{% endblock %}



{% block buttom_js %}
    {{ super() }}
    <!--bees-->
    <script src="{{ url_for('static', filename='js/bees.js') }}"></script>
    <!--Treeview-->
    <script src="{{ url_for('static', filename='plugins/bootstrap-treeview/js/bootstrap-treeview.min.js') }}"></script>
    <!--ace-->
    <script type="text/javascript" src="{{ url_for('static', filename='plugins/ace/ace.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='plugins/ace/ext-language_tools.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='plugins/ace/theme-tomorrow.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='plugins/ace/mode-php.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='plugins/ace/mode-python.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='plugins/ace/mode-sh.js') }}"></script>

    <script type="text/javascript">

        $(function () {

            bees.initSelect2();

            // 代码编辑器初始化
            var editor = null;
            $(document).ready(function () {
                ace.require("ace/ext/language_tools");
                editor = ace.edit("editor");
                editor.setOptions({
                    enableBasicAutocompletion: true,
                    enableSnippets: true,
                    enableLiveAutocompletion: true //只能补全
                });
                editor.setTheme("ace/theme/tomorrow");//monokai模式是自动显示补全提示
                editor.getSession().setMode("ace/mode/python");//语言
                editor.setShowPrintMargin(false);
                editor.setFontSize(14);
            });

            // 代码编辑器
            $(".fs-box > .label").on('click', function () {
                $(this).parent('.fs-box').toggleClass('fullscreen');
                if($(this).parent('.fs-box').hasClass('fullscreen')){
                    $('.fs-box .fs-max').addClass('hidden');
                    $('.fs-box .fs-min').removeClass('hidden');
                    $('#editor').css({'height':'100%'});
                    editor.resize();
                }else {
                    $('.fs-box .fs-min').addClass('hidden');
                    $('.fs-box .fs-max').removeClass('hidden');
                    $('#editor').css({'height':'520px'});
                    editor.resize();
                }
            });

            //动态切换代码编辑器的语言
            $('select[name="language"]').on('change', function () {
                var value = $(this).val();
                switch(value)
                {
                    case 'python3':
                        editor.getSession().setMode("ace/mode/python");
                        break;
                    case 'php':
                        editor.getSession().setMode("ace/mode/php");
                        break;
                    case 'sh':
                        editor.getSession().setMode("ace/mode/sh");
                        break;
                    default:
                        editor.getSession().setMode("ace/mode/python");
                }
            });

            var $formEle = $('form[name="scriptForm"]');
            bees.niceValidate($formEle);
            $formEle.on("valid.form", function () {
                setAjaxCSRFToken();

                $.ajax({
                    type: 'post',
                    url: '{{ url_for("tasks.script-create") }}',
                    data : {
                        'name': $('input[name="name"]').val(),
                        'language': $('select[name="language"]').val(),
                        'content': editor.getValue()
                    },
                    success: function (result) {
                        if (result.code != 200) {
                            $formEle.find('*[name='+ result.data.field +']').focus().addClass('has-error');
                            bees.tipError({
                                message: result.data.message
                            });
                        }else {
                            bees.tipInfo({
                                message: '新增成功'
                            });
                            window.location.href = '{{ url_for("tasks.script-list") }}'
                        }
                    }
                });
            })
        })

    </script>

{% endblock %}
